<template>
	<view class="content">
		<skeleton class="tab-skeleton" :loading="isTabLoading" :showAvatar="false" :showTitle="false" :row="6">
			<ui-tabs
					ref="tabs"
					v-model="active"
					:labels="list"
					type="swiper"
					:sticky="true"
					:bjt="true"
					@tab-change="tabChange"
			>
				<template v-slot:bjt>
					<view class="banner">
						<image class="banner-img" :src="require('@/static/images/special/free-background.png')"></image>
					</view>
				</template>
				<template v-slot:swiper="{ item }">
					<!--渲染商品列表-->
					<view class="goods-list">
						<view
							class="goods-wrap"
							v-for="(goodsItem, goodsIndex) in item.goodsList"
							:key="goodsItem.gid"
						>
							<goods-item :item="goodsItem"></goods-item>
						</view>

						<!--商品骨架-->
						<view class="skeleton-wrap" v-for="i in ['a', 'b', 'c', 'd']" :key="i" v-if="item.goodsList.length === 0 && !item.finished && !item.empty">
							<skeleton
								class="goods-skeleton"
								:loading="true"
								avatarShape="square"
								:row="3"
								avatarSize="228rpx"
							></skeleton>
						</view>

						<!-- 加载中插件 -->
						<load-more
							:loading="item.loading"
							:finished="item.finished"
							:empty="item.empty"
						></load-more>
					</view>
				</template>
			</ui-tabs>
		</skeleton>

		<view class="skeleton-content" v-if="isTabLoading">
			<!--商品骨架-->
			<view class="skeleton-wrap" v-for="i in ['e', 'f', 'g', 'h']" :key="i">
				<skeleton
					class="goods-skeleton"
					avatarShape="square"
					:row="3"
					avatarSize="228rpx"
				></skeleton>
			</view>
		</view>

		<!--回到顶部-->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
			<text class="iconfont icon-huidaodingbu"></text>
		</view>
	</view>
</template>

<script>
import Skeleton from '@/components/uni/Skeleton';
import GoodsItem from "@/components/GoodsItem";
import LoadMore from "@/components/LoadMore";
import loader from '@/utils/mixin/loader';

export default {
	name: 'Goods',
	mixins: [loader],
	components: {
		Skeleton,
	    GoodsItem,
		LoadMore
	},
	data() {
		return {
			isTabLoading: true
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			// 获取商品分类
			this.$service.shopping.classify.classify().then(res => {
				res.forEach(item => {
					item.label = item.mainName;
					item.loading = false;
					item.finished = false;
					item.error = false;
					item.page = 1;
					item.goodsList = [];
				});
				this.list = this.list.concat(res);
				setTimeout(() => {
					this.isTabLoading = false;
				}, 300)

				this.loadMore(this.list[0]);
			});
		},
		// 加载前参数处理
		beforeLoad(item) {
			if (Number(item.cid) === 0) {
				this.params.cid = '';
				this.params.order = 'ysqLevel';
				this.params.sort = 'desc';
				this.params.isNine = 1;

			} else {
				this.params.cid = item.cid;
				this.params.isNine = 1;
				this.params.order = '';
				this.params.sort = '';
			}

			this.service = this.$service.shopping.goods.page(this.params);
			return true;
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
    min-height: 100vh;;
	background: #f6f7fa;
	padding-bottom: 50rpx;
	/deep/ .ui-tabs__pane{
		width: 700rpx;
		margin: -100px auto 0;
		background: #fff;
		border-radius: 32rpx;
		overflow: hidden;
	}
	.banner{
		width: 100%;
		height: 390rpx;
		.banner-img{
			width: 100%;
			height: 100%;
		}
	}
	.goods-list {
		width: 700rpx;
        min-height: 850rpx;
		margin: auto;
		padding: 10rpx 20rpx;
		background: #ffffff;
		border-radius: 32rpx;
		box-sizing: border-box;
		.goods-wrap {
			padding: 24rpx 0;
			border-bottom: 2rpx dashed #e2e2e2;
		}
		.skeleton-wrap {
			padding: 0;
			border-bottom: 2rpx dashed #e2e2e2;
		}
	}
	.skeleton-content {
		width: 700rpx;
		padding: 0 20rpx;
		margin: 220rpx auto 0;
		height: 1000rpx;
		background: #fff;
		border-radius: 32rpx;
		.skeleton-wrap {
			border-bottom: 2rpx dashed #E2E2E2;
		}
	}
}
</style>
